import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import QtQuick3D.Effects 6.2

Item{
    anchors.fill: parent

    property Rectangle selectedRectangle: homeBtn
    property int minWidth: topBarBtnRec.width/3*1
    property int maxWidth: topBarBtnRec.width/3*2
    property double btnopacity: 0.6
    property int fontSize:30
    property url currentPageUrl: "Canteen.qml"
    property string currentPageName: "餐厅"
    property string currentPageCheckedIcon: "qrc:/icon/icon/canteen.svg"
    property string currentPageReleasedIcon: "qrc:/icon/icon/canteen_grey.svg"

    Rectangle{//左侧按钮
        id:topBarBtnRec
        width: parent.width/4
        height: parent.height
        anchors.left: parent.left
        color:"transparent"

        ListModel{
            id:selectListModel
            ListElement{
                name:"餐厅"
                iconCheckedUrl:"qrc:/icon/icon/canteen.svg"
                iconReleasedUrl:"qrc:/icon/icon/canteen_grey.svg"
                pageUrl:"Canteen.qml"
            }
            ListElement{
                name:"卧室"
                iconCheckedUrl:"qrc:/icon/icon/bedroom.svg"
                iconReleasedUrl:"qrc:/icon/icon/bedroom_grey.svg"
                pageUrl:"BedRoom.qml"
            }
            ListElement{
                name:"客厅"
                iconCheckedUrl:"qrc:/icon/icon/livingroom.svg"
                iconReleasedUrl:"qrc:/icon/icon/livingroom_grey.svg"
                pageUrl:"LivingRoom.qml"
            }
            ListElement{
                name:"厨房"
                iconCheckedUrl:"qrc:/icon/icon/kitchen.svg"
                iconReleasedUrl:"qrc:/icon/icon/kitchen_grey.svg"
                pageUrl:"Kitchen.qml"
            }
        }

        Rectangle{//第一个按钮
            id:homeBtn
            width: selectedRectangle == homeBtn ? maxWidth : minWidth
            height: parent.height/3*2
            x: 30
            anchors.verticalCenter: parent.verticalCenter
            radius: 15
            border.width: selectedRectangle == homeBtn ? 1 : 0
            border.color: "white"
            color:btnColor
            clip: true

            RowLayout{
                anchors.fill: parent  // 填充整个父组件
                spacing: 10          // 间距

                Image {
                    id: homeBtnIcon
                    source: selectedRectangle == homeBtn ? "qrc:/icon/icon/home.svg" : "qrc:/icon/icon/home_grey.svg"
                    Layout.alignment: Qt.AlignHCenter
                    x: 15
                }
                Text {
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    x: 85
                    font.pixelSize: fontSize // 设置字体大小
                    text:"我家"
                    color: textColor
                    visible: selectedRectangle == homeBtn ? true : false
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    selectedRectangle = homeBtn;
                    contentLoader.source = Qt.resolvedUrl("MyHome.qml")
                }
            }
        }

        Rectangle{//第二个按钮（带下拉框）
            id:selectBtn
            width: selectedRectangle == selectBtn ? maxWidth : minWidth
            height: parent.height/3*2
            x: homeBtn.x+homeBtn.width+30
            anchors.top: homeBtn.top
            border.width: selectedRectangle == selectBtn ? 1 : 0
            border.color: "white"
            radius: 15
            color: btnColor
            opacity:selectedRectangle == selectBtn ? 1 : btnopacity

            RowLayout {
                id:selectBtnRow
                anchors.fill: parent  // 填充整个父组件
                spacing: 10          // 间距

                Image {
                    id: selectBtnIcon
                    Layout.alignment: Qt.AlignHCenter
                    source: selectedRectangle == selectBtn ? currentPageCheckedIcon : currentPageReleasedIcon
                    x:35
                }
                Text {
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    font.pixelSize: fontSize // 设置字体大小
                    text:currentPageName
                    color: textColor
                    visible: selectedRectangle == selectBtn ? true : false
                }
                Rectangle{//下拉列表区域
                    width: 45
                    height:parent.height
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                    visible: selectedRectangle == selectBtn ? true : false
                    color:"transparent"
                    Image {
                        id: dropDownList
                        source: "qrc:/icon/icon/dropdown.svg"
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {//下拉列表
                            drowdownPopup.open();
                        }
                    }
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    selectedRectangle = selectBtn;
                    contentLoader.source = Qt.resolvedUrl(currentPageUrl);
                }
                enabled: selectedRectangle == selectBtn ? false : true
            }

            Popup {//下拉框
                id: drowdownPopup
                width: selectBtn.width
                height: selectBtn.height * selectListModel.count
                y: selectBtn.height
                padding: 0
                clip:true

                contentItem: ListView {
                    width: drowdownPopup.width
                    height: selectBtn.height
                    model: selectListModel

                    delegate: Rectangle {
                        width: parent.width
                        height: selectBtn.height
                        color: btnColor
                        border.width: 1
                        border.color:textColor
                        radius: 10

                        Text {
                            anchors.centerIn: parent
                            text: model.name
                            color: textColor
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                drowdownPopup.close();
                                currentPageUrl = model.pageUrl
                                currentPageCheckedIcon = model.iconCheckedUrl
                                currentPageReleasedIcon = model.iconReleasedUrl
                                currentPageName = model.name
//                                mainStackView.push(room)
                                contentLoader.source = Qt.resolvedUrl(currentPageUrl);
                            }
                        }
                    }
                }
                background: Rectangle {
                    color: "transparent" // 设置为透明
                    border.color: textColor
                    border.width: 1
                    radius: 20
                }
            }
        }
    }

    Rectangle{//右侧按钮
        id: topBtnRight
        width: parent.width/4
        height: parent.height/3*2
        anchors.right: parent.right
        color:"transparent"

        RowLayout{
            anchors.fill: parent
            spacing: 20
            Rectangle{
                id:topBtnRight1
                width:minWidth
                height: parent.height/2
                color:btnColor
                radius: 10
                MouseArea{
                    anchors.fill: parent
                    onClicked:{
                        hintPopup.open()
                    }
                }
            }
            Rectangle{
                id:topBtnRight2
                width:minWidth
                height: parent.height/2
                color:btnColor
                radius: 10
                MouseArea{
                    anchors.fill: parent
                    onClicked:{
                        hintPopup.open()
                    }
                }
            }
        }
    }
}

